<template>
  <div class="foot-container">
    <el-backtop :right="50" :bottom="50" />
    <!-- 博主信息 -->
    <div>
      <span>博主信息</span>
      <p>姓名：xu</p>
      <p>邮箱：2538791342@qq.com</p>
    </div>

    <!-- 网站信息 -->
    <div>
      <span>网站信息</span>
      <p>访客数：{{stationInfo.visitorNum}}</p>
      <p>友链：{{ stationInfo.friendNum }}</p>
      <p>建站日期：{{ parseTime(stationInfo.createStationDate,'{y}-{m}-{d}' )}}</p>
      <p @click="goRecord()" class="record">备案号：黔ICP备2021007624号</p>
    </div>

    <!-- 数据统计 -->
    <div>
      <span>数据统计</span>
      <p>文章总数：{{ stationInfo.articleNum }}</p>
      <p>注册用户：{{ stationInfo.registerNum }}</p>
      <p>留言总数：{{ stationInfo.commentNum }}</p>
      <p>运行天数：{{ getBetweenDay(stationInfo.createStationDate) }}</p>
    </div>

    <!-- 项目架构 -->
    <div>
      <span>项目架构</span>
      <p>前端框架：vue3+element-plus+vuex</p>
      <p>后端框架：jdk17+spring-boot3+mybatis-plus</p>
    </div>
  </div>
</template>

<script setup>
import { onMounted,ref } from "vue";
import { useStore } from 'vuex'; // 引入useStore 方法
const store = useStore();  // 该方法用于返回store 实例
import { parseTime } from "@/utils/xu"


let stationInfo = ref({});

onMounted(()=>{
  stationInfo.value = store.getters.geStationInfo;
})

function getBetweenDay(dateStr){
  if(dateStr){
    // 这个是毫秒
    let betweenTime = new Date().getTime() - new Date(dateStr).getTime();
    // 除以 1000毫秒 / 60 秒 / 60分 / 24小时
    return  parseInt(betweenTime / 1000 / 60 / 60 / 24 +'') ;
  }
}

/** 去备案界面 */
function goRecord(){
  window.open('https://beian.miit.gov.cn/', '_blank');
}
</script>

<style scoped>
@import "myFooter.css";
</style>
